<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0,viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./style.css">
    <title>My Canvas</title>
</head>

<body>
    <canvas id="canvas"></canvas>
    <h3>Diagram</h3>
    <div class="nav">
        <div class="bgChange">
            <button class="grid" id="grid" onclick="Change()"></button>
            <button class="white" id="white" onclick="Change()"></button>
        </div>

        <div class="drawingBoard">
            <img class="icon pen active" id="pen" src="./img/pen.svg">
            <img class="icon" id="eraser" src="./img/eraser.svg" alt="Eraser">

            <div class="sizes" id="sizes" onclick="sizesChange()">
                <img class="icon" id="lineSizes" src="./img/line.svg" alt="Sizes"></img>
                <ol class="thickness" id="thickness">
                    <li id="smallest" class="smallest"></li>
                    <li id="thin" class="thin"></li>
                    <li id="midline" class="midline"></li>
                    <li id="thick" class="thick"></li>
                </ol>
            </div>
            <ol class="palette">
                <li id="black" class="black"></li>
                <li id="gray" class="gray"></li>
                <li id="greyish" class="greyish"></li>
                <li id="blue" class="blue"></li>
                <li id="red" class="red"></li>
                <li id="green" class="green"></li>
                <li id="yellow" class="yellow"></li>
                <li>
                    <input type="color" id="colorPicker" value="#fafafa">
                </li>
            </ol>


        </div>
        <div class="tool">
            <button class="clear" id="clear">
                <img class="toolIcon" src="./img/clear.svg" alt="清空">

            </button>
            <button class="save" id="download">
                <img class="toolIcon" src="./img/save.svg" alt="保存">
            </button>
        </div>
    </div>

    <script src="./main.js">
    </script>
    <script>

    </script>
</body>

</html>